<template>
  <!-- 回到顶部 -->
  <div class="topup" :style="{display:flag}">
    <span class="iconfont icon-huojian rockets" @click="rocketsbtn()"></span>
  </div>
</template>

<script>
export default {
  name:'TopUp',
  data(){
    return{
      flag:false,
    }
  },
  //表示挂载成功
  mounted(){
    this.scroll(); //组件挂载到dom后调用一次滚动判断的方法
    // 监听滚动事件，浏览器窗口
    window.addEventListener("scroll",()=>{
      this.scroll(); //鼠标滚动时触发函数
    })
  },
  methods:{
    scroll(){
      // 获取页面的滚动条距离顶部的值
      let top = document.documentElement.scrollTop;
      if(top >=500){
        this.flag = "block";
      }else{
        this.flag='none';
      }
    },
    rocketsbtn(){
          // 点击火箭，导航条回到顶部
         document.documentElement.scrollTop = 0;
    }
  },
  
}
</script>

<style lang="less" scoped>
  .topup{
    position: fixed;
    bottom: 50px;
    right: 20px;
    display: none;
  }
  .topup .rockets{
    font-size: 100px;
    color: rgb(230, 87, 87);
    cursor: pointer;
    transition: all .5s;
  }
  .topup .rockets:hover{
    color: slateblue;
  }
</style>